<template>
<view class="floodControl">
	<uni-nav-bar
		left-icon="arrowleft" 
		:fixed="true"
		:statusBar="true"
		title="防汛预警" 
		color="#fff" 
		background-color="#f29004" 
		@clickLeft="back">
		<block slot="right">
			<view class="nav-bar-btn" @tap="viewLocations">
				<image class="icon" mode="aspectFit" src="@/static/icon/iv_yj_dian.png"></image>
			</view>
		</block>
	</uni-nav-bar>
	
	<view class="list list-a">
		<view class="list-group">
			<view 
				class="list-item" 
				v-for="(item, index) in list" 
				:key="index">
				<view class="list-item-header">
					{{`${item.name}`}}
				</view>
				<view class="list-item-body btns">
					<text class="btn" :class="{before: item.statusBefore == 1}" @tap="openPage(item, 'before')">事前</text>
					<text class="btn" :class="{middle: item.statusMiddle == 1}" @tap="openPage(item, 'middle')">事中</text>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { querySzbmJsdBusinessList } from '@/api/configure.js';
import { deepClone ,mergeUrls, getUserInfo, formatDateStr } from '@/util/util.js';
import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
import configUrl from '@/util/url.js';	
export default{
	data() {
		return {
			list: []
		}
	},
	methods: {
		viewLocations() {
			uni.navigateTo({
			    url: '/pages/floodControl/locations'
			});
		},
		openPage(item, type){
			if ( type == 'before' && item.statusBefore == 0) {
				uni.showToast({
				    title: '事前未完成，无法查看！',
				    duration: 2000,
					icon: 'none'
				});
				
				return ;
			} 
			
			if( type == 'middle' && item.statusMiddle == 0 ) {
				uni.showToast({
				    title: '本次预警未进行任务部署，无法查看！',
				    duration: 2000,
					icon: 'none'
				});
				return ;
			} 
			
			let data = {
				type: type,
				id: item.id,
				statusAfter: item.statusAfter
			}
			
			let url = mergeUrls('/pages/floodControl/deploy', data);
			
			uni.navigateTo({
			    url: url
			});
		},
		getSzbmJsdBusinessList() {
			querySzbmJsdBusinessList().then( (res) => {
				let list = res.data.slice(0);
				
				this.list = list.map( (item) => {
					return item;
				} )
			});
		},
		init() {
			this.getSzbmJsdBusinessList();
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onLoad(option) {
		this.init();
	}
}
</script>

<style lang="scss">
.list{
	&.list-a{
		.list-group{
			.list-item{
				display: flex;
				position: relative;
				top: 0rpx;
				left: 0rpx;
				&:after{
					height: 1rpx;
					content: '';
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					left: 0rpx;
					background-color:#bdbdbd;
					transform: scaleY(.5);
					opacity: 0.382;
				}
				.list-item-header{
					width: 49.99%;
					padding: 14rpx 0rpx 14rpx 30rpx;
					font-size: 24rpx;
					line-height: 120%;
					color: #5d5d5d;
					box-sizing: border-box;
				}
				.list-item-body{
					padding: 7rpx 30rpx 7rpx 10rpx;
					width: 49.99%;
					box-sizing: border-box;
					color: #5d5d5d;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					&:after{
						width: 1rpx;
						content: '';
						position: absolute;
						bottom: 0rpx;
						top: 0rpx;
						left: 0rpx;
						background-color:#bdbdbd;
						transform: scaleX(.5);
						opacity: 0.382;
					}
				}
			}
		}
	}
}

.btn{
	margin:0px 20rpx;
	font-size: 28rpx;
	font-weight: bold;
	&.before{
		color: #007aff;
	}
	&.middle{
		color: #f29004;
	}
}

.nav-bar-btn{
	margin-right: -20rpx;
	padding: 10px;
	height: 44px;
	width: 44px;
	box-sizing: border-box;
	.icon{
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>
